<template>
  <div class="query_content">
    <!-- 缺陷查询报表 -->
    <!-- 搜索框 -->
    <div class="query_serch">
      <el-form class="table_serch">
        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">机种编码</div>
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="
              width: 140px;
              height: 30px;
              margin-left: 5px;
              margin-top: 8px;
            "
            v-model="formInline.recipe"
            @input="(e) => (formInline.recipe = validForbid(e))"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </div>

        <!-- 工业 -->
        <div class="table_serch_labe" style="margin-left: 15px">
          <div class="table_serch_labe_title">工单编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 140px; margin-left: 10px"
              v-model="formInline.order"
              @input="(e) => (formInline.order = validForbid(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 15px">
          <div class="table_serch_labe_title">线体编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 140px; margin-left: 10px"
              v-model="formInline.line"
              @input="(e) => (formInline.line = validForbid(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 15px">
          <div class="table_serch_labe_title">站点编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 135px; margin-left: 7px"
              v-model="formInline.site"
              @input="(e) => (formInline.site = validForbid(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 15px">
          <div class="table_serch_labe_title">班次编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 140px; margin-left: 10px"
              v-model="formInline.class"
              @input="(e) => (formInline.class = validname(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 15px">
          <div class="table_serch_labe_title">缺陷类型</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 140px; margin-left: 10px"
              v-model="formInline.errorcode"
              @input="(e) => (formInline.errorcode = validForbid(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">起始日期</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.starttime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 140px; margin-left: 5px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 5px">
          <div class="table_serch_labe_title">结束日期</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.endtime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 140px; margin-left: 10px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">人员编码</div>
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="
              width: 140px;
              height: 30px;
              margin-left: 12px;
              margin-top: 5px;
            "
            v-model="formInline.personid"
            :fetch-suggestions="querySearch"
            @input="(e) => (formInline.personid = validForbid(e))"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </div>

        <div class="table_serch_labe" style="margin-left: 45%">
          <el-button
            type="mini"
            style="height: 30px; margin-top: 5px"
            @click="defectinquire"
            >查询</el-button
          >
          <!-- <el-button type="mini">刷新</el-button>
          <el-button type="mini">运行</el-button> -->
        </div>
      </el-form>
    </div>
    <div class="query_hader">
      <!-- 折线图 -->
      <div id="query_contion"></div>
      <div class="query_table">
        <div style="padding: 10px; font-size: 12px">人员检测站点效能统计表</div>
        <el-table
          :data="assemblelist"
          border
          size="small"
          :show-header="false"
          style="width: 100%; height: 20"
        >
          <el-table-column prop="id" label=""></el-table-column>
          <el-table-column prop="time1" label=""></el-table-column>
          <el-table-column prop="time2" label=""></el-table-column>
          <el-table-column prop="time3" label=""></el-table-column>
          <el-table-column prop="time4" label=""></el-table-column>
          <el-table-column prop="time5" label=""></el-table-column>
          <el-table-column prop="time6" label=""></el-table-column>
          <el-table-column prop="time7" label=""></el-table-column>
          <el-table-column prop="time8" label=""></el-table-column>
          <el-table-column prop="time9" label=""></el-table-column>
          <el-table-column prop="time10" label=""></el-table-column>
          <el-table-column prop="time11" label=""></el-table-column>
          <el-table-column prop="time12" label=""></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 重叠柱状图 -->
    <div id="quety_bra"></div>
    <!-- 不良率柱状图-->
    <div id="query_barst"></div>
    <!-- 人员列表 1 -->
    <!-- 人员系列 -->
    <div id="query_barey"></div>
    <div class="query_table_to">
      <div style="padding: 10px; font-size: 12px">人员产能统计表</div>
      <el-table
        :data="items.slice(0)"
        border
        size="small"
        :row-style="{ height: '10px' }"
        style="font-size: 10px"
        :show-header="false"
      >
        <el-table-column prop="name" :label="this.name"></el-table-column>
        <el-table-column
          prop="BlackDot"
          :label="this.BlackDot"
        ></el-table-column>
        <el-table-column prop="Block" :label="this.Block"></el-table-column>
        <el-table-column
          prop="BrightDot"
          :label="this.BrightDot"
        ></el-table-column>
        <el-table-column prop="Line" :label="this.Line"></el-table-column>
        <el-table-column prop="Mura" :label="this.Mura"></el-table-column>
        <el-table-column prop="NG" :label="this.NG"></el-table-column>
        <el-table-column prop="total" :label="this.total"></el-table-column>
      </el-table>
    </div>

    <div class="table_loding" v-show="isshow">
      <div class="table_title">加载中... ....</div>
      <div class="table_timer">网络请求延时: {{ timer }}秒</div>
    </div>

    <Popup
      v-show="Popup_show"
      @ClosePopup="ClosePopup"
      @cancelget="cancelget"
      :timer="timer"
    ></Popup>
  </div>
</template>

<script>
import axios from "axios";
import Popup from "../../Pop-up/Pop-up";
export default {
  components: { Popup },
  data() {
    return {
      timer: 0,
      Popup_show: false,
      isshow: false,
      valtimer: "",
      tableData: [],
      assemblelist: [],
      tablelist: [],
      items: [],
      formInline: {
        recipe: "VR2-1-24 ",
        order: "",
        line: "",
        site: "",
        starttime: "",
        endtime: "",
        errorcode: "",
        class: "",
        personid: "",
        type: [],
      },
      options: [
      ],
      restaurants: [],
      datalist: [],
      lineChart: [],
      barlist2: [],
      barlist3: [],
      name: "",
      BlackDot: "",
      Block: "",
      BrightDot: "",
      Line: "",
      Mura: "",
      NG: "",
      total: "",
    };
  },

  methods: {
    removetmer() {
      this.isshow = false;
      clearInterval(this.valtimer);
      this.timer = 0;
    },

    //计时器
    timerclick() {
      this.valtimer = setInterval(() => {
        this.isshow = true;
        this.timer++;
      }, 1000);
    },

    defectinquire() {
      setTimeout(() => {
        if (this.datalist.length == "") {
          this.Popup_show = true;
          this.Popup_timer = setInterval(() => {
            this.timer++;
          }, 1000);
        } else {
          return;
        }
      }, 5000);

      if (navigator.onLine) {
        // console.log("网络已连接");
        this.removetmer();
      } else {
        // console.log("已断网");
        setTimeout(() => {
          this.timerclick();
        }, 3000);
      }
      if (this.formInline.recipe == "") {
        this.$alert("机种编码不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime < this.formInline.starttime) {
        this.$alert("结束日期不能小于起始日期", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        const CancelToken = axios.CancelToken;
        this.ajax({
          url: "capacitystacs",
          method: "GET",
          params: {
            data: this.formInline,
          },
          cancelToken: new CancelToken((c) => {
            this.cancel = c;
          }),
        }).then((res) => {
          var reslut = res.data;
          if (reslut.length == 0) {
            // console.log("1111111111111111");
            setTimeout(() => {
              this.isshow = true;
              this.timerclick();
            }, 3000);
          }
          if (reslut.code == 200) {
            // this.tableData = [];
            var queysdata = reslut.data;
            // console.log(queysdata);
            this.tableData = queysdata.bar1;
            this.datalist = queysdata.lineChart;
            var list = [];
            // console.log("----------------", this.tableData);
            for (let i = 0; i < this.tableData.length; i++) {
              let obj = {
                id: this.tableData[i][0],
                time1: this.tableData[i][1],
                time2: this.tableData[i][2],
                time3: this.tableData[i][3],
                time4: this.tableData[i][4],
                time5: this.tableData[i][5],
                time6: this.tableData[i][6],
                time7: this.tableData[i][7],
                time8: this.tableData[i][8],
                time9: this.tableData[i][9],
                time10: this.tableData[i][10],
                time11: this.tableData[i][11],
                time12: this.tableData[i][12],
              };
              list.push(obj);
            }
            this.assemblelist = list;
            // console.log("222222222222222222222", this.assemblelist);

            this.tablelist = queysdata.bar3;
            this.barlist2 = queysdata.bar2;
            this.lineChart = queysdata.lineChart;
            if (this.datalist) {
              this.query_contion();
              this.quety_bra();
              this.query_barst();
              this.query_barey();
            }
            this.items = [];
            for (let i = 0; i < this.tablelist.length; i++) {
              let obj = {
                name: this.tablelist[i][0],
                BlackDot: this.tablelist[i][1],
                Block: this.tablelist[i][2],
                BrightDot: this.tablelist[i][3],
                Line: this.tablelist[i][4],
                Mura: this.tablelist[i][5],
                NG: this.tablelist[i][6],
                total: this.tablelist[i][7],
              };

              if (this.items.length == 11) {
                return false;
              } else {
                this.items.push(obj);
              }
            }
            // console.log(this.items);
            this.name = this.items[0].name;
            this.BlackDot = this.items[0].BlackDot;
            this.Block = this.items[0].Block;
            this.BrightDot = this.items[0].BrightDot;
            this.Line = this.items[0].Line;
            this.NG = this.items[0].NG;
            this.Mura = this.items[0].Mura;
            this.total = this.items[0].total;
          } else if (reslut.code == 204) {
            this.$alert(reslut.message, "消息提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
        });
      }
    },

    ClosePopup() {
      this.Popup_show = false;
      clearInterval(this.Popup_timer);
    },

    cancelget() {
      // console.log("-----------------------终止请求");
      this.Popup_show = false;
      this.cancel();
      clearInterval(this.Popup_timer);
    },
    //  折线图
    query_contion() {
      let query_contion = this.$echarts.init(
        document.getElementById("query_contion")
      );
      // console.log("折线图内部数据", this.datalist);
      let itemkey = [];
      var timeys = [];
      var val1 = [];
      var val2 = [];
      var val3 = [];
      var val4 = [];
      var val5 = [];
      var val6 = [];
      var val7 = [];
      var val8 = [];
      var val9 = [];
      var val10 = [];
      for (let i = 0; i < this.datalist.length; i++) {
        itemkey.push(this.datalist[i].name);
      }
      for (let i = 0; i < this.datalist.length; i++) {
        timeys = this.datalist[i].content;

        if (this.datalist[i].name == "person001") {
          val1 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person002") {
          val2 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person003") {
          val3 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person004") {
          val4 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person005") {
          val5 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person006") {
          val6 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person007") {
          val7 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person008") {
          val8 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person009") {
          val9 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person010") {
          val10 = this.datalist[i].content;
        }
      }

      query_contion.setOption({
        title: {
          text: "人工检测站点效能统计",
          x: "center",
          y: "0%",
          textStyle: {
            fontSize: 15,
            fontWeight: 200,
          },
        },
        xAxis: {
          type: "category",
          data: timeys.map((item) => {
            return item.time;
          }),
        },
        legend: {
          data: itemkey,
          top: "10%",
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        yAxis: {
          type: "value",
          //   height:"",
          axisLabel: {
            show: true,
            // formatter:'{value}%',
            interval: "auto",
          },
        },
        tooltip: {
          trigger: "axis",
          //   formatter: '{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />'
        },
        series: [
          {
            name: "person001",
            data: val1.map((item) => {
              return item.val;
            }),
            type: "line",
          },
          {
            name: "person002",
            itemStyle: {
              //   color:'#5793f3'
            },
            data: val2.map((item) => {
              return item.val;
            }),
            type: "line",
          },
          {
            name: "person003",
            itemStyle: {
              //   color:'#5793f3'
            },
            data: val3.map((item) => {
              return item.val;
            }),
            type: "line",
          },
          {
            name: "person004",
            itemStyle: {
              //   color:'#5793f3'
            },
            data: val4.map((item) => {
              return item.val;
            }),
            type: "line",
          },
          {
            name: "person005",
            itemStyle: {
              //   color:'#5793f3'
            },
            data: val5.map((item) => {
              return item.val;
            }),
            type: "line",
          },
          {
            name: "person006",
            itemStyle: {
              //   color:'#5793f3'
            },
            data: val6.map((item) => {
              return item.val;
            }),
            type: "line",
          },
          {
            name: "person007",
            itemStyle: {
              //   color:'#5793f3'
            },
            data: val7.map((item) => {
              return item.val;
            }),
            type: "line",
          },
          {
            name: "person008",
            itemStyle: {
              //   color:'#5793f3'
            },
            data: val8.map((item) => {
              return item.val;
            }),
            type: "line",
          },
          {
            name: "person009",
            itemStyle: {
              //   color:'#5793f3'
            },
            data: val9.map((item) => {
              return item.val;
            }),
            type: "line",
          },
          {
            name: "person010",
            itemStyle: {
              //   color:'#5793f3'
            },
            data: val10.map((item) => {
              return item.val;
            }),
            type: "line",
          },
        ],
      });
    },

    // 重叠柱状图
    quety_bra() {
      let quety_bra = this.$echarts.init(document.getElementById("quety_bra"));
      // var date = localStorage.getItem("quertlien");

      // console.log('--------------------------------00',this.datalist);
      let itemkey = [];
      var timeys = [];
      var val1 = [];
      var val2 = [];
      var val3 = [];
      var val4 = [];
      var val5 = [];
      var val6 = [];
      var val7 = [];
      var val8 = [];
      var val9 = [];
      var val10 = [];
      for (let i = 0; i < this.datalist.length; i++) {
        itemkey.push(this.datalist[i].name);
      }
      for (let i = 0; i < this.datalist.length; i++) {
        timeys = this.datalist[i].content;

        if (this.datalist[i].name == "person001") {
          val1 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person002") {
          val2 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person003") {
          val3 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person004") {
          val4 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person005") {
          val5 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person006") {
          val6 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person007") {
          val7 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person008") {
          val8 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person009") {
          val9 = this.datalist[i].content;
        } else if (this.datalist[i].name == "person010") {
          val10 = this.datalist[i].content;
        }
      }

      quety_bra.setOption({
        title: {
          text: "人工检测站点产能统计",
          left: "center",
          y: "0%",
          textStyle: {
            fontWeight: 200,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: itemkey,
          top: "10%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",
          height: 260,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: timeys.map((item) => {
            return item.time;
          }),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "person001",
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: val1.map((item) => {
              return item.val;
            }),
          },
          {
            name: "person002",
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: val2.map((item) => {
              return item.val;
            }),
          },
          {
            name: "person003",
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: val3.map((item) => {
              return item.val;
            }),
          },
          {
            name: "person004",
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: val4.map((item) => {
              return item.val;
            }),
          },
          {
            name: "person005",
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: val5.map((item) => {
              return item.val;
            }),
          },
          {
            name: "person006",
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: val6.map((item) => {
              return item.val;
            }),
          },
          {
            name: "person007",
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: val7.map((item) => {
              return item.val;
            }),
          },
          {
            name: "person008",
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: val8.map((item) => {
              return item.val;
            }),
          },
          {
            name: "person009",
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: val9.map((item) => {
              return item.val;
            }),
          },
          {
            name: "person010",
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: val10.map((item) => {
              return item.val;
            }),
          },
          // {
          //   name: "total",
          //   type: "line",
          //   lineStyle: {
          //     normal: {
          //       type: "dashed",
          //       color: "#000",
          //     },
          //   },
          //   smooth: false,
          //   markPoint: {
          //     symbolOffset: ["90%", "90%"],
          //   },
          //   data: val1,
          // },
        ],
      });
    },
    // 不良率柱状图
    query_barst() {
      let query_barst = this.$echarts.init(
        document.getElementById("query_barst")
      );
      // var databar = sessionStorage.getItem("querylist");
      // var barlist = JSON.parse(databar);
      var querbar = this.barlist2;
      // console.log(querbar)
      var querkey = [];
      var querval = [];
      for (let i = 0; i < querbar.length; i++) {
        querkey.push(querbar[i].name);
        querval.push(querbar[i].val);
      }
      query_barst.setOption({
        title: {
          text: "人工检测站点不良率统计",
          textStyle: {
            fontWeight: 200,
          },
          left: "center",
          y: "3%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["员工"],
          right: "10%",
        },
        xAxis: {
          type: "category",
          data: querkey,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: querval,
            name: "员工",
            type: "bar",
            barWidth: 35,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
            label: {
              // show: true,
              position: "insideRight",
              textStyle: {
                color: "black",
                fontSize: 14,
              },
              itemStyle: {
                normal: {
                  color: "rgb(47, 117, 221)",
                },
              },
            },
          },
        ],
      });
    },
    // 人员重叠柱形图
    query_barey() {
      let query_barey = this.$echarts.init(
        document.getElementById("query_barey")
      );
      var list = this.tablelist;
      var keyis = list.slice(1);
      var namekey = list[0];
      var BlackDot = [];
      var Block = [];
      var BrightDot = [];
      var Line = [];
      var Mura = [];
      var NG = [];
      var total = [];
      var name = [];

      var BlackDotkey = "";
      var Blockkey = "";
      var BrightDotlistkeyv = "";
      var Linekey = "";
      var Murakey = "";
      var ngkey = "";
      var totalkey = "";
      BlackDotkey = namekey[1];
      Blockkey = namekey[2];
      BrightDotlistkeyv = namekey[3];
      Linekey = namekey[4];
      Murakey = namekey[5];
      ngkey = namekey[6];
      totalkey = namekey[7];

      for (let i = 0; i < keyis.length; i++) {
        BlackDot.push(keyis[i][1]);
        Block.push(keyis[i][2]);
        BrightDot.push(keyis[i][3]);
        Line.push(keyis[i][4]);
        Mura.push(keyis[i][5]);
        NG.push(keyis[i][6]);
        total.push(keyis[i][7]);
        name.push(keyis[i][0]);
      }

      query_barey.setOption({
        title: {
          text: "人工缺陷统计",
          left: "center",
          y: "0%",
          textStyle: {
            fontWeight: 300,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: namekey.slice(1),
          align: "right",
          verticalAlign: "center",
          // top:"10%",
          left: "30%",
          // x: 230,
          y: 40,
        },
        grid: {
          left: "5%",
          right: "4%",
          bottom: "2%",
          height: 260,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: name,
          // data:['09:00','10:00',"11:00","12:00",'13:00',"14:00","15:00","16:00","17:00","18:00","19:00","20:00"]
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: BlackDotkey,
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: BlackDot,
          },
          {
            name: Blockkey,
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Block,
          },
          {
            name: BrightDotlistkeyv,
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: BrightDot,
          },
          {
            name: Linekey,
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Line,
          },
          {
            name: Murakey,
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: Mura,
          },
          {
            name: ngkey,
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              position: "insideRight",
            },
            data: NG,
          },
          // {
          //   name: "NG",
          //   type: "bar",
          //   stack: "总量",
          //   label: {
          //     // show: true,
          //     position: "insideRight",
          //   },
          //   data: NG,
          // },

          {
            name: totalkey,
            type: "line",
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#000",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["90%", "90%"],
            },
            data: total,
          },
        ],
      });
    },

    loadAll() {
      return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
};
</script>

<style  scoped>
.query_content {
  width: 100%;
  /* border: 1px solid #000; */
}
.query_serch {
  width: 100%;
  /* border: 1px solid red; */
}
.query_hader {
  width: 100%;
  /* border: 1px solid blue; */
  background: #ffffff;
  margin-top: 10px;
}
#query_contion {
  width: 100%;
  height: 300px;
}
.query_table {
  width: 100%;
  /* border: 1px solid rgb(47, 117, 221); */
}
#quety_bra {
  width: 100%;
  height: 360px;
  /* border: 1px solid #000; */
  background: #ffffff;
  margin-top: 10px;
}
#query_barst {
  width: 100%;
  height: 300px;
  margin-top: 10px;
  background: #ffffff;
}
.query_table {
  width: 100%;
  /* border: 1px solid #000; */
  margin-top: 5px;
}
#query_barey {
  width: 100%;
  height: 350px;
  margin-top: 10px;
  background: #ffffff;
}
.query_table_to {
  width: 100%;
  margin-top: 15px;
  background: #ffffff;
}

.table_serch {
  width: 100%;
  min-width: 1000px;
  padding-top: 8px;
  /* border: 1px solid red; */
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  /* border: 1px solid #000; */
  height: 35px;
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}

.table_loding {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(68, 186, 236);
  position: absolute;
  z-index: 999;
  top: 40%;
  left: 40%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px;
}

.table_title {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.table_timer {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 10px;
}
</style> 





